import Reach from 'react'
import './Search.css'

class Search extends Reach.Component {
    constructor() {
        super() //调用父类的构造函数
        this.state = {
            inshow: false,
            history: ['北京积云', '积云教育', '积云是最顶尖的职业教育培训机构', '123456'],
            selectIndex: -1,
            enterIndex: -1,
        }
    }
    render() {
        return (
            <div className="search_box">
                <div>
                    <input
                        //获取焦点
                        onFocus={() => {
                            this.setState({
                                inshow: true
                            })
                        }}
                        //失去焦点
                        onBlur={() => {
                            this.setState({
                                inshow: false
                            })
                        }}
                        ref="input"
                        onKeyDown={(event) => {
                            var keyCode = event.keyCode;
                            console.log(keyCode);
                            if (keyCode == 38) {
                                //往上移动下标 减减 --
                                this.state.selectIndex--
                                if (this.state.selectIndex < 0) {
                                    this.state.selectIndex = this.state.history.length - 1
                                }
                                this.setState({
                                    selectIndex: this.state.selectIndex
                                })
                                this.refs.input.value = this.state.history[this.state.selectIndex]

                                // this.state.
                                // 往下移动 下标 加加++
                            } else if (keyCode == 40) {
                                this.state.selectIndex++;
                                if(this.state.selectIndex>this.state.history.length-1){
                                    this.state.selectIndex=0;
                                }
                                this.setState({
                                    selectIndex:this.state.selectIndex
                                })
                                this.refs.input.value=this.state.history[this.state.selectIndex]
                            }
                        }}
                        onClick={(val)=>{
                        this.state.selectIndex=this.state.val
                        }}
                    />
                    <button onClick={() => {
                        console.log(this.refs.input);
                        var value = this.refs.input
                    }}>百度一下</button>
                </div>
                <div className={this.state.inshow ? "search_flex" : "search_flex_show"}>
                    {/* 循环 */}
                    {
                        this.state.history.map((element, index) => {
                            return <div key={index}
                                className={this.state.enterIndex === index ? 'search_history_hover' : "search_history"}
                                onMouseEnter={() => {
                                    this.setState({
                                        enterIndex: index,
                                        value:element
                                    })
                                }}
                                onClick={()=>{
                                    this.setState({
                                        enterIndex:index,
                                        value:element
                                    })
                                }}
                            >{element}</div>
                        })
                    }
                </div>
            </div>
        )
    }
}


export default Search